

<template>
<div>
  <el-form :label-position="formConfig.labelPosition" :model="form">
    <preview-render-item :currentItem="item" v-for="(item,index) in layouts" :key="index"></preview-render-item>
  </el-form>
</div>
</template>
<script>
import {mapState} from "vuex"
import PreviewRenderItem from "./preview-render-item.vue";
import Vue from "vue";
Vue.component("preview-render-item",PreviewRenderItem)
export default {
  name: "FormPreview",

  provide(){
    return {
      root:this
    }
  },
  data(){
    return {
      form:{}
    }
  },
  mounted() {
    debugger
    const form = {};
    this.scanLayout(this.layouts,form);
    // console.log(form)
    this.form = form;
  },
  methods:{
    scanLayout(layout,form){
      layout.forEach(item=>{
        if(item.type !== 'form'){
          if(item.render === 'tabs'){
            item.tabsList.forEach(it=>{
              this.scanLayout(it.layouts,form)
            })
          }
          if(item.render === 'layout'){
            item.layoutList.forEach(it=>{
              this.scanLayout(it.layouts,form)
            })
          }
          return;
        }
        if(item.render === 'switch'){
          form[item.field] = false;
        }else if(item.render === 'slider'){
          form[item.field] = 0;
        }else if(item.render === 'select'){
          if(item.props.multiple.value){
            form[item.field] = [];
          }else{
            form[item.field] = "";
          }
        }else if(item.render === 'checkbox' || item.render === 'cascader'){
          form[item.field] = [];
        }else if(item.render === 'tree-select'){
          form[item.field] = undefined;
        }else{
          form[item.field] = '';
        }

      })
    }
  },
  computed:{
    ...mapState({
      layouts:state=>state.formGen.layouts,
      formConfig:state=>state.formGen.formConfig,
    })
  },
}
</script>
<style scoped lang="scss">

</style>
